<template>
  <div class="main-body">
    <Header :logo="jsonData.region_img_201_1" :options="jsonData.region_text_100_1" />
    <div class="main">
      <van-swipe ref="swiper" class="section" :autoplay="autoplay" :show-indicators="false">
        <van-swipe-item v-for="(item, index) in handlerPaging" :key="index">
          <div class="section">
            <div class="list-header">
              <div class="list-item">医生</div>
              <div class="list-item item-room">诊室</div>
              <div class="list-item item-curr">正在就诊</div>
              <div class="list-item item-wait">等候就诊</div>
            </div>
            <div class="list-body">
              <template v-for="(row, i) in item">
                <queue-lists :options="row" :key="i" />
              </template>
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
      <div class="pass-list clearfix over">
        <div class="pass-left"><span>过号</span></div>
        <div class="pass-body">
          <vue-seamless-scroll
            class="pass-scroll"
            :key="rollKey"
            :data="sliceArr(passList, 20)"
            :class-option="classOption(7, 2)"
            @ScrollEnd="handleScrollEnd()"
          >
            <ul class="clearfix over">
              <li v-for="(item, index) in sliceArr(passList, 20)" :key="index">{{ item.registerId }}&nbsp;{{ item.patientName }}</li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
    <Footer :options="jsonData.region_text_100_2" />
    <msg-api-win />
  </div>
</template>
<script src="./waits.js"></script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '@/assets/styles/wait.scss';
</style>
